{% extends 'base.html' %}

{% block title %}
    课程详情
{% endblock %}

{% block content %}
    <div class="main">
        <div class="row mb-1">
            <div class="col-md-12">
                <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    <div class="col-auto d-none d-lg-block" style="width: 400px;">
                        <img src="{{ MEDIA_URL }}{{ course.css_image }}" class="card-img" alt="课程封面">
                    </div>
                    <div class="col p-4 d-flex flex-column position-static">
                        <h3 class="mb-0">{{ course.css_name }}</h3>
                        <p class="card-text mb-1" style="margin-top: 10px">授课老师：{{ course.css_teacher }}</p>
                        <p class="card-text mb-1" style="margin-top: 10px">课程简介：{{ course.css_desc }}</p>
                        <p class="card-text mb-1" style="margin-top: 10px">课程详情：{{ course.css_detail }}</p>
                        <p class="card-text mb-1" style="margin-top: 10px">课程须知：{{ course.css_course_need }}</p>
                        <p class="card-text mb-1" style="margin-top: 10px">已选人数：{{ course.css_num }}人</p>
                        <p class="card-text mb-1" style="margin-top: 10px">人数限制：{{ course.css_max_num }}人</p>
                        <p class="card-text mb-1" style="margin-top: 10px">选课时间：{{ course.css_start_time.date }} - {{ course.css_end_time.date }}</p>
                        <p class="card-text mb-auto" style="margin-top: 10px">开课学校：{{ course.css_school }}</p>
                        <button>开</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}